<template>
  <div>
    <!--头部导航  -->
    <!-- <headerNavigation :jump="1"></headerNavigation> -->
    <labelNavigation :Xuexidata="semesterName"></labelNavigation>
    <button class="return" @click="back()">
      <i class="el-icon-arrow-left"></i>
      返回
    </button>
    <div class="photoCountainer">
      <div class="background">
        <img src="@/assets/imagesbackground/Grow.png" />
        <div class="imageCountainer">
          <el-upload
            class="mygrow"
            :action="uploadImgUrl"
            list-type="picture-card"
            :on-success="handleUploadSuccess"
            :auto-upload="false"
            :on-error="handleUploadError"
            ref="imageUpload"
            :show-file-list="true"
            :headers="headers"
            :file-list="fileList"
            :before-upload="handleBeforeUpload"
            accept="image/jpg,image/jpeg,image/png"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btnCountainer">
        <div class="btnCountainer2">
          <button class="btn" @click="next">保存并下一模块</button>
          <button class="btn" @click="confirmFn">保存</button>
          <!-- <button class="btn">取消</button> -->
          <button class="btn" @click="showModal = true">获取图库照片</button>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div class="mask" v-if="showModal" @click="showModal = false"></div>
    <div class="pop" v-if="showModal">
      <div class="Countainer">
        <div class="leftCountainer">
        <button
          class="show-Photo"
          :class="{ photoshow: classIndex == index }"
          v-for="(item, index) in classselfphoto"
          :key="index"
          @click="(classIndex = index), photosFn()">
          {{ item.name }}
        </button>
        </div>
        <div class="ClassPhotoCountainer">
        <img :src="`${src1 + item}`" class="imagesList" :class="{show:echaIndex==index}" :key="index"
          v-for="(item, index) in imageList"
          alt=""
          @click="chuanc({item},index)"/>
        <button @click="submit" class="btn1">确定</button>
        </div>
      </div>
    </div>
    <footerNavigation></footerNavigation>
  </div>
</template>
<script>
// import headerNavigation from "../components/background/headerNavigation";
import labelNavigation from "../components/background/labelNavigation";
// import footerNavigation from "../components/background/footerNavigation";
import * as imageConversion from 'image-conversion'
import {
  studentbsogsoAPI,
  allphotosAPI,
  optionimgreport,
} from "@/api/make/make";
import { getToken } from "@/utils/auth";
import module from "../../allurlimg/img";

export default {
  components: {
    // headerNavigation,
    labelNavigation,
    // footerNavigation,
  },
  data() {
    return {
     classIndex: 0,
      photShow: true,
      DataList:[],
      classselfphoto: [{ name: "个人图库" }, { name: "班级图库" }],
      imageList: [],

      semesterName:"",
      number: 0,
      src1: "",
      uploadList: [],
      echaIndex :'',
      showModal: false,
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      studentId: "",
      growKey: "",
      remark: "",
      growthId: "",
      galleryId: "1",
      uploadImgUrl:
        process.env.VUE_APP_BASE_API +
        `/business/gallery/upload/` +
        this.studentId +
        "/" +
        this.growKey +
        "/" +
        this.remark, // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  mounted(){
     window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
  },
  async created() {
    this.src1 = module.host;
      //学期
    let semesterName=this.$route.query.semesterName
    console.log("33333",this.$route.query.semesterName)
    if(semesterName!=undefined){
    sessionStorage.setItem("semesterName",this.$route.query.semesterName)
    this.semesterName=sessionStorage.getItem("semesterName")
    }
    else{
    this.semesterName=sessionStorage.getItem("semesterName")
    }

    let studentId = this.$route.params.stuId;
    let growthId = this.$route.params.growthId;
    if (studentId != undefined) {
      sessionStorage.setItem("studentId", this.$route.params.stuId);
      this.studentId = sessionStorage.getItem("studentId");
    } else {
      this.studentId = sessionStorage.getItem("studentId");
    }
    if (growthId != undefined) {
      sessionStorage.setItem("growthId", this.$route.params.growthId);
      this.growthId = sessionStorage.getItem("growthId");
    } else {
      this.growthId = sessionStorage.getItem("growthId");
    }
    //获取图库图片
    this.photos();
    this.growKey = 10;
    this.remark = "1";
    this.uploadImgUrl =
      process.env.VUE_APP_BASE_API +
      `/business/growthItem/upload/` +
      this.studentId +
      "/" +
      this.growKey +
      "/" +
      this.remark;
      console.log(this.studentId, this.growthId);
      const res = await studentbsogsoAPI({
      studentId: this.studentId,
      growthId: this.growthId,
      });
    console.log("111111", res);
    console.log(res.data["10"]['img1']);
    let url = module.host + res.data["10"]['img1'];
    console.log(url);
    this.fileList.push({
      url: url,
    });
  },
  methods: {
    //点击切换班级图库和个人图库
    photosFn() {
      if (this.classIndex === 0) {
        this.imageList = this.DataList.userGallery;
      } else if(this.classIndex === 1){
        this.imageList = this.DataList.gradeGallery;
      }
      this.photShow = false
      this.$nextTick(function() {
      this.photShow = true
      })
    },

    back() {
      this.$router.go(-1)
    },
    //保存并返回首页
    next() {
     if(this.showModal === true){
     this.$router.push("/doGrowth/personality");
     }else{
      this.$refs.imageUpload.submit();
      this.$router.push("/doGrowth/personality");
     }
    },
    // 获取图库图片
    async photos() {
      // this.echaIndex=''
      const res1 = await allphotosAPI({ studentId: this.studentId });
      this.DataList = res1.data;
      if (this.classIndex === 0) {
        this.imageList = this.DataList.userGallery;
      } else {
        this.imageList = this.DataList.gradeGallery;
      }
    },
    chuanc(data,index) {
      this.echaIndex = index
      this.path = data.item;
      console.log(this.path);
    },
    submit() {
      this.fileList = [];
      this.confirm(this.path);
      this.showModal = false;
    },
    async confirm() {
      console.log("111", this.studentId);
      this.growthKey = 10;
      this.remark = "1";
      const res2 = await optionimgreport({
        studentId: this.studentId,
        growthKey: this.growthKey,
        remark: this.remark,
        path: this.path,
      });
      const res = await studentbsogsoAPI({
        studentId: this.studentId,
        growthId: this.growthId,
      });
      if(res.code==200){
      let url = module.host + res.data["10"]['img1'];
      this.fileList.push({
        url: url,
      });
      this.$message.success("从图库上传图片成功")
      }else{
      this.$message.error("从图库上传图片失败")  
      }
    },
    //上传图片前
      handleBeforeUpload(file) {
          var img = file.name.substring(file.name.lastIndexOf('.') + 1)
          const suffix = img === 'jpg'||"JPG"
          const suffix2 = img === 'png'||"PNG"
          const suffix3 = img === 'jpeg'||'JPEG'
          const isLt1M = (file.size / 1024 / 1024) * 10 < 6;
          if (!suffix && !suffix2 && !suffix3) {
            this.$message.error("只能上传图片！");
            return false
          }
          else if (!isLt1M) {
          this.$message.warning("上传头像图片大小不能超过 600kb! 将进行压缩");
          let myImg = new Promise((resolve) => {
            // 压缩到500KB,这里的500就是要压缩的大小,可自定义
          imageConversion.compressAccurately(file, 500).then((res) => {
              resolve(res);
            });
          });
          return myImg;
          }
          return isLt1M;
      },

    // 上传成功回调
    handleUploadSuccess(res, file) {
        if(res.code===200){
          this.$message({
          message: '恭喜你，上传成功',
          type: 'success'
        });
        }else{
           this.$message({
           message: '上传失败,请重新上传',
           type: 'error'
        });
      }
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传图片失败，请重试");
    },
    confirmFn() {
      this.$refs.imageUpload.submit();
    },
  },
};
</script>
<style scoped>
.background {
  position: relative;
  margin-top: 3.125rem;
}
.mygrow ::v-deep .el-upload--picture-card {
  position: absolute;
  z-index: 2;
  height: 23.1875rem !important;
  width: 17.3125rem !important;
  border: .0625rem solid rgba(124, 0, 0, 1);
  border-style: dashed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.el-icon-plus:before {
  content: "\A\E6D9\A点击上传图片" !important;
  font-size: 1.25rem !important;
  white-space: pre !important;
  color: rgba(124, 0, 0, 1);
}
.el-icon-plus {
  margin-top: 8.125rem;
}
/* 背景图片 */
.background img {
  height: 34rem;
  width: 24rem;
  display: flex;
  margin: 0 auto;
}
/* 按钮 */
.upload-img-btn span {
  width: 100%;
  height: 3.125rem;
  color: rgba(124, 0, 0, 1);
  text-align: center;
  margin-bottom: 1.875rem;
}
.btnCountainer {
  display: flex;
  margin-top: 3.75rem;
  justify-content: center;
}
.btn {
  background-color: rgba(124, 0, 0, 1);
  color: aliceblue;
  border: .0625rem solid rgba(187, 187, 187, 1);
  width: 10.625rem;
  height: 3.125rem;
  font-size: 1.25rem;
}
.btnCountainer2 {
  width: 46.875rem;
  display: flex;
  justify-content: space-between;
}
.imageCountainer {
  position: absolute;
  z-index: 3;
  height: 23.1875rem !important;
  width: 17.3125rem !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.mygrow ::v-deep  .el-upload-list__item {
  height: 23.1875rem !important;
  width: 17.3125rem !important;
  position: absolute;
  z-index: 3;
}
/* 弹框 */
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pop {
  z-index: 4;
  position: absolute;
  background-color: #fff;
  position: fixed;
  top: 6.25rem;
  left: 18.75rem;
  width: 56.25rem;
  height: 50rem;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: .625rem;
}
.btn1 {
  position: absolute;
  height: 3.125rem;
  width: 6.25rem;
  bottom: 0;
  right: 0;
  background-color: brown;
  color: white;
  font-size: 1.25rem;
}
.imagesList {
  height: 9.375rem;
  width: 9.375rem;
  border: .0625rem solid rgba(187, 187, 187, 0.47);
  margin-top: 1.25rem;
  margin-left: 1.25rem !important;
}

.return {
  font-size: 1.125rem;
  text-align: center;
  position: relative;
  left: 27.5rem;
  border: 0rem;
  background: #fff;
}
.show {
 border: 1.0325rem solid rgb(124, 0, 19);
 border-style: dashed;
 height: 9.375rem;
 width: 9.375rem;
 margin-top: 1.25rem;
 margin-left: 1.25rem !important;
}
.photoshow {
  color: #7c0000;
  /* padding-bottom: 0.3125rem; */
  border-bottom: 0.1875rem solid #7c0000 !important;
}
.show-Photo {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.875rem 0rem 0 1.5625rem;
  background: #ffffff;
}
.ClassPhotoCountainer{
  overflow:auto;
  height: 40.125rem;
  width: 50.75rem;
  border: 0.0625rem solid rgba(187, 187, 187, 0.47);
  margin: 0 auto;
  margin-top: 1.25rem;
}
</style>